import React, { useState } from 'react';
import { Input, Button, Tabs, List, Card, Typography, Row, Col, Image } from 'antd';
import { useNavigate, Link } from 'react-router-dom';
import {
  RightOutlined,
  FileTextOutlined,
  FilePdfOutlined,
  FileWordOutlined,
  FileExcelOutlined
} from '@ant-design/icons';
import MainLayout from '../../components/MainLayout';
import styles from './index.module.css';

const { Search } = Input;
const { Title, Text, Paragraph } = Typography;
const { TabPane } = Tabs;

// 模拟数据
const articles = {
  speeches: [
    { id: 1, title: '在XX会议上的重要讲话', date: '2024-03-15', tag: '重要' },
    { id: 2, title: '关于产业发展的战略部署', date: '2024-03-10', tag: '政策' },
    { id: 3, title: '推进数字经济发展的指导意见', date: '2024-03-08', tag: '创新' },
    { id: 4, title: '加快产业转型升级的工作报告', date: '2024-03-05', tag: '发展' },
  ],
  reports: [
    { id: 1, title: '2024年政府工作报告全文', date: '2024-03-15', tag: '重要' },
    { id: 2, title: '2023年工作总结报告', date: '2024-03-10', tag: '总结' },
  ],
  policies: [
    { id: 1, title: '关于数字经济发��的政策解读', date: '2024-03-12', tag: '解读' },
    { id: 2, title: '产业升级相关政策分析', date: '2024-03-08', tag: '分析' },
  ],
  meetings: [
    { id: 1, title: '2024年产业发展工作会议纪要', date: '2024-03-14', tag: '会议' },
    { id: 2, title: '区域协同发展座谈会记录', date: '2024-03-11', tag: '会议' },
  ],
  notices: [
    { id: 1, title: '关于开展行业调研的通知', date: '2024-03-13', tag: '通知' },
    { id: 2, title: '2024年重点工作安排', date: '2024-03-09', tag: '公告' },
  ],
};

const localKnowledge = [
  { title: '产业政策分析报告.pdf', type: 'pdf' },
  { title: '行业发展白皮书.docx', type: 'word' },
  { title: '数据分析报告.xlsx', type: 'excel' },
  { title: '会议纪要汇编.pdf', type: 'pdf' },
  { title: '政策文件集.pdf', type: 'pdf' },
];

const importantContent = [
  {
    title: '2024年产业发展重点方向',
    desc: '聚焦数字经济、绿色发展、智能制造...',
    color: '#1890ff'
  },
  {
    title: '产业链协同创新行动计划',
    desc: '构建现代产业体系，推进产业链现代化...',
    color: '#52c41a'
  },
  {
    title: '区域产业布局优化方案',
    desc: '优化区域产业结构，促进协调发展...',
    color: '#722ed1'
  }
];

const getFileIcon = (type: string) => {
  switch (type) {
    case 'pdf':
      return <FilePdfOutlined className={styles.fileIcon} style={{ color: '#ff4d4f' }} />;
    case 'word':
      return <FileWordOutlined className={styles.fileIcon} style={{ color: '#1890ff' }} />;
    case 'excel':
      return <FileExcelOutlined className={styles.fileIcon} style={{ color: '#52c41a' }} />;
    default:
      return <FileTextOutlined className={styles.fileIcon} />;
  }
};

const KnowledgePage: React.FC = () => {
  const navigate = useNavigate();
  const [searchValue, setSearchValue] = useState('');

  const handleSearch = (value: string) => {
    console.log('搜索:', value);
  };

  const renderTabContent = (dataSource: typeof articles.speeches) => (
    <List
      dataSource={dataSource}
      renderItem={item => (
        <List.Item className={styles.articleItem}>
          <div className={styles.articleContent}>
            <Link to={`/knowledge/news/${item.id}`}>
              <Text strong ellipsis>{item.title}</Text>
            </Link>
            <div className={styles.articleMeta}>
              <Text type="secondary">{item.date}</Text>
              <span className={styles.tag}>{item.tag}</span>
            </div>
          </div>
        </List.Item>
      )}
    />
  );

  return (
    <MainLayout>
      <div className={styles.container}>
        <Title level={2} className={styles.pageTitle}>知识库</Title>
        
        <div className={styles.searchSection}>
          <Search
            placeholder="输入知识库关键词"
            value={searchValue}
            onChange={(e) => setSearchValue(e.target.value)}
            onSearch={handleSearch}
            enterButton="搜索"
            size="large"
            className={styles.searchInput}
          />
        </div>

        <Row gutter={24} className={styles.content}>
          <Col span={12}>
            <Card className={styles.leftSection}>
              <div className={styles.sectionHeader}>
                <Title level={5} className={styles.sectionTitle}>最新资讯</Title>
                <Button 
                  type="link"
                  onClick={() => navigate('/knowledge/news')}
                  className={styles.moreLink}
                >
                  更多...
                </Button>
              </div>
              <Tabs defaultActiveKey="speeches" className={styles.tabs}>
                <TabPane tab="领导讲话" key="speeches">
                  {renderTabContent(articles.speeches)}
                </TabPane>
                <TabPane tab="政府工作报告" key="reports">
                  {renderTabContent(articles.reports)}
                </TabPane>
                <TabPane tab="政策解读" key="policies">
                  {renderTabContent(articles.policies)}
                </TabPane>
                <TabPane tab="重要会议" key="meetings">
                  {renderTabContent(articles.meetings)}
                </TabPane>
                <TabPane tab="通知公告" key="notices">
                  {renderTabContent(articles.notices)}
                </TabPane>
              </Tabs>
            </Card>
          </Col>

          <Col span={7}>
            <Card className={styles.middleSection}>
              <div className={styles.sectionHeader}>
                <Title level={5} className={styles.sectionTitle}>重要内容</Title>
                <Button 
                  type="link"
                  onClick={() => navigate('/knowledge/important')}
                  className={styles.moreLink}
                >
                  更多...
                </Button>
              </div>
              {importantContent.map((item, index) => (
                <div key={index} className={styles.importantItem}>
                  <div 
                    className={styles.colorBlock} 
                    style={{ backgroundColor: item.color }}
                  />
                  <Title level={5}>{item.title}</Title>
                  <Paragraph ellipsis={{ rows: 2 }} type="secondary">
                    {item.desc}
                  </Paragraph>
                </div>
              ))}
            </Card>
          </Col>

          <Col span={5}>
            <Card className={styles.rightSection}>
              <div className={styles.sectionHeader}>
                <Title level={5} className={styles.sectionTitle}>本地知识库</Title>
                <Button 
                  type="link"
                  onClick={() => navigate('/knowledge/manage')}
                  className={styles.moreLink}
                >
                  进入
                </Button>
              </div>
              <List
                dataSource={localKnowledge}
                renderItem={item => (
                  <List.Item className={styles.knowledgeItem}>
                    {getFileIcon(item.type)}
                    <Text ellipsis>{item.title}</Text>
                  </List.Item>
                )}
              />
            </Card>
          </Col>
        </Row>
      </div>
    </MainLayout>
  );
};

export default KnowledgePage; 